<!-- 我的页 -->
<template>
  <div class="box">
    <div class="top">
      <img src="../../img/102.png" alt="" />
      <div class="names">
        <div class="tops">
          <span class="iconfont icon-quanbudingdan-01" @click="qognjh()"></span>
          <span class="iconfont icon-set" @click="sets()"></span>
        </div>
        <div class="btn">
          <img :src="data.img" alt="" />
          <span style="color:#FFFAE8;font-weight: 600;">{{ data.name }}</span>
          <p style="margin-top:0.5rem;">{{ data.phone }}</p>
        </div>
        <ul class="foorer">
          <li>
            <p>{{num}}</p>
            <p>收藏</p>
          </li>
           <li>
            <p>{{inten}}</p>
            <p>积分</p>
          </li>
          
        </ul>
      </div>
    </div>
    <div class="cont">
      <div class="lisu">
        <b>我的订单</b>
        <p>
          <span @click="entired()">全部订单</span> <span class="iconfont icon-angle-right"></span>
        </p>
      </div>
      <ul class="order">
        <li
          v-for="(item, index) in list"
          :key="index"
          @click="rece(item, index)"
        >
          <p :class="item.iocn"></p>
          <p>{{ item.title }}</p>
        </li>
      </ul>
    </div>
    <div class="oom">
      <b>我的服务</b>
      <ul class="list">
        <li @click="site()">
          <span
            class="iconfont icon-dingwei"
            style="color: #03abd9; margin-right: 0.8rem"
          ></span
          ><span>我的收货地址</span>
        </li>
        <li @click="colle()">
          <span
            class="iconfont icon-shoucang"
            style="color: #f15830; margin-right: 0.8rem"
          ></span
          ><span>我的收藏</span>
        </li>
        <li @click="ntegr()">
          <span
            class="iconfont icon-tianmao2"
            style="color: #eec027; margin-right: 0.8rem"
          ></span
          ><span>积分商城</span>
        </li>
        <!-- <li>
            <span class="iconfont icon-youhuiquan-01" style="color:#EE6D27;margin-right: 0.8rem;"></span><span>我的优惠劵</span>
          </li> -->
        <li @click="town()">
          <span
            class="iconfont icon-kefu"
            style="color: #4227ee; margin-right: 0.8rem"
          ></span
          ><span>我的客服</span>
        </li>
        <li @click="about()">
          <span
            class="iconfont icon-dianhua"
            style="color: #97ee27; margin-right: 0.8rem"
          ></span
          ><span>关于我们</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import * as API from "@/components/api/hanjinqi.js";
// import axios from 'axios'
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      data: {
        img: JSON.parse(localStorage.getItem("token"))
          ? JSON.parse(localStorage.getItem("token")).img
            ? JSON.parse(localStorage.getItem("token")).img
            : "https://cdn.jsdelivr.net/gh/zmf-6/cdn//img/portraits.png"
          : "https://cdn.jsdelivr.net/gh/zmf-6/cdn//img/portrait.png",
        name: JSON.parse(localStorage.getItem("token"))
          ? JSON.parse(localStorage.getItem("token")).name
          : "未登录",
        phone: JSON.parse(localStorage.getItem("token"))
          ? JSON.parse(localStorage.getItem("token")).phone
          : "没有账号,因为还没有登录",
      },
      list: [
        {
          iocn: "iconfont icon-wodedingdan",
          title: "待付款",
        },
        {
          iocn: "iconfont icon-wenjian",
          title: "待发货",
        },
        {
          iocn: "iconfont icon-daishouhuo-01",
          title: "待收货",
        },
        {
          iocn: "iconfont icon-bianji",
          title: "待完成",
        },
      ],
      num:'',
      // inten:JSON.parse(localStorage.getItem('token')).integral
      inten:''
    };
  },

  // 监听属性
  computed: {},
  // 组件挂载的地方
  components: {},
  // 生命周期 - 创建完成（访问当前this实例）
  
  async created() {
    //获取 积分
     let res=await API.getToken({uid:JSON.parse(localStorage.getItem('token')).uid})
     console.log(res)
     this.inten=res.data.integral
     //获取收藏
     this.num=res.likes_num
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    // console.log(this.$store);
  },
  // Vue方法定义
  methods: {
    // 点击签到
    async qognjh() {
      this.$router.push({ path: "/sign" });
    },
    // 点击设置
    sets() {
      this.$router.push({ path: "/sets" });
    },
    //点击待收货
    async rece(item, index) {
      // console.log(index)
      this.$router.push({ path: "/recei" });
      this.$store.commit("hanjinqi/setList", index);
      await API.sites({ id: index });
    },
    //点击我的收货地址页
    site() {
      this.$router.push({ path: "/site" });
    },
    //点击我的收藏
    async colle() {
      this.$router.push({ path: "/colle" });
      // console.log(JSON.parse(localStorage.getItem('token')))
      let res = await API.cillse({
        uid: JSON.parse(localStorage.getItem("token")).uid,
      });
      // console.log(res);
    },
    // 点击积分商城
    ntegr() {
      this.$router.push({ path: "/ntegr" });
    },
    // 点击我的客服
    town() {
      
      this.$router.push({ path: "/town", query: { path: this.$route.path } });
    },
    //点击关于我们
    about() {
      this.$router.push({ path: "/about" });
    },
    // 点击全部订单
    entired(){
      console.log('全部订单')
       this.$router.push({ path: "/recei" });
      this.$store.commit("hanjinqi/setList", 5);
    }
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.box {
  width: 100%;
  height: 620px;
  background: #f4f4f4;
  
}
.box .top {
  width: 100%;
  height: 14rem;
  position: relative;
}
.top img {
  width: 100%;
  height: 100%;
}
.top .names {
  position: absolute;
  left: 0;
  top: 1rem;
  width: 100%;
  height: 13rem;
  /* background: pink; */
}
.names .tops {
  width: 20%;
  height: 2rem;
  float: right;
}
.tops span {
  float: left;
  margin-left: 0.8rem;
  color: white;
}
.names .btn {
  width: 80%;
  height: 3rem;
  margin-top: 2.5rem;
  margin-left: 10%;
  float: left;
  margin-bottom: 1.5rem;
}
.btn img {
  width: 3rem;
  height: 3rem;
  border-radius: 2rem;
  float: left;
  margin-right: 0.8rem;
}
.btn span {
  color: #fffcfd;
  font-size: 1rem;
}
.btn p {
  color: #fffcfd;
  font-size: 1rem;
}
.names .foorer {
  width: 100%;
  height: 3.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.foorer li {
  width: 5rem;
  color: white;
}
.foorer li p {
  text-align: center;
}
.box .cont {
  width: 100%;
  height: 8rem;
  background: #ffffff;
  float: left;
}
.cont .lisu {
  width: 100%;
  height: 2rem;
}
.lisu b {
  float: left;
  color: #101010;
  margin: 0.7rem 0 0 2rem;
  font-weight: 600;
  font-size: 1rem;
}
.lisu p {
  float: right;
  margin-top: 0.75rem;
}
.lisu p span {
  color: #999999;
  /* margin-right: 0.1rem; */
}
.cont .order {
  width: 100%;
  height: 3rem;
  margin-top: 2.5rem;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
.order li {
  float: left;
}
.order li p {
  text-align: center;
  margin-bottom: 0.5rem;
}
.box .oom {
  width: 100%;
  height: 16rem;
  background: #ffffff;
  margin-top: 0.666667rem;
  float: left;
}
.oom b {
  margin: 0.7rem 0 0 2rem;
  float: left;
}
.oom .list {
  width: 100%;
  height: 100%;
  float: left;
  margin-top: 1rem;
}
.list li {
  width: 90%;
  height: 2rem;
  line-height: 2rem;
  margin-left: 10%;
}
</style>
